var that;
class Tab {
    constructor(id){
        that=this;
        //获取元素
        this.main = document.querySelector(id);
        // this.lis = this.main.querySelectorAll('li');
        // this.sections = this.main.querySelectorAll('section');
        this.add = this.main.querySelector('.tabadd')
        //li father
        this.ul = this.main.querySelector('.fisrstnav ul:first-child')
        //创建父section
        this.fseciton = this.main.querySelector('.tabscon')
        //删除按钮
        // this.remove = this.main.querySelectorAll('.icon-guanbi')
        this.init()
    }
    init(){
        this.updateNode();
        // 初始化 让相关元素绑定事件
        this.add.onclick=this.addTab;
        for(let i=0;i<this.lis.length;i++){
            this.lis[i].index=i;
            this.lis[i].onclick=this.toggleTab;
            this.remove[i].onclick=this.removeTab;
            this.spans[i].ondblclick=this.editTab;
            this.sections[i].ondblclick=this.editTab;
        }
    }
    //1切换功能
    toggleTab(){
        that.clearClass();
        // console.log(this.index);
        this.className='liactive'
        that.sections[this.index].className='conactive'
    }
    // 2添加功能
    addTab(){
        that.clearClass();
        // console.log(that.sections.length);
        // 创建li
        const li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
        const section =  '<section class="conactive">测试 </section>';
        //把字符串追加到ul中
        that.ul.insertAdjacentHTML('beforeend',li);
        that.fseciton.insertAdjacentHTML('beforeend',section);
        that.init()
    }
    // 3删除功能
    removeTab(e){
        //阻止冒泡 反正触发li的切换
        e.stopPropagation();
        let index = this.parentNode.index;
        //根据索引删除li和section
        that.lis[index].remove();
        that.sections[index].remove();
        that.init()
        //删除的元素未被选中时
        if(document.querySelector('.liactive')) return
        //删除被选中li 使前一个li被选中
        index--;
        //前一个li点击
        that.lis[index]&&that.lis[index].click();
    }
    // 4修改功能
    editTab(){
        const str =this.innerHTML;
        // 双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML='<input type="text" />'
        //获取文本框
        const input=this.children[0];
        input.value = str;
        //使文本处于被选中状态
        input.select();
        //离开文本框把input中值给span
        input.onblur = function(){
            this.parentNode.innerHTML = this.value;
        }
        //按下回车也会赋值
        input.onkeyup = function(e) {
            if(e.keyCode === 13){
                this.blur();
            }
        }
    }
    // 清除样式
    clearClass(){
        for(let i=0;i<this.lis.length;i++){
            this.lis[i].className='';
            this.sections[i].className='';
        }
    }  
    // 获取所有li，section和删除
    updateNode(){
        this.sections = this.main.querySelectorAll('section');
        this.lis = this.main.querySelectorAll('li');
        this.remove = this.main.querySelectorAll('.icon-guanbi');
        this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
    }
}
var tab = new Tab('#tab');